<template>
  <div>
    <div class="photo">
      <img :src="player.coverImg" alt />
      <p>{{player.name}}</p>
    </div>
    <div class="playerVoteInfo">
      <ul>
        <li>
          <p>{{player.i}}</p>
          <p>排名</p>
        </li>
        <li>
          <p>{{player.ticket}}</p>
          <p>票数</p>
        </li>
        <li>
          <p>{{player.gift}}</p>
          <p>礼物</p>
        </li>
        <li>
          <p>{{player.browse}}</p>
          <p>浏览量</p>
        </li>
      </ul>
    </div>
    <div class="playerDesc">
      <header>选手描述</header>
      <p v-if="player.describes==null">这人很懒什么都没有留下~</p>
      <p v-else>{{player.describes}}</p>
    </div>
    <div class="playerPhoto">
      <header>选手照片</header>
      <ul>
        <li v-for="(item,index) in playerImg" :key="index">
          <img mode="widthFix" :src="item.url" alt />
        </li>
      </ul>
    </div>
    <div class="listOfVotes">
      <header>票数贡献榜</header>
      <div v-if="hdPlayerGiftlist==[]" class="listContent">
        <p>喜欢我的人 在这里驻留</p>
        <div class="sendGift">送ta礼物加票</div>
      </div>
      <div v-else class="listContents">
        <li v-for="(item,index) in hdPlayerGiftlist" :key="index">
          <aside>
            <img :src="item.extend3" alt />
            <p>{{item.extend2}}</p>
          </aside>
          <div>
            <p>{{item.ticket}}票</p>
          </div>
        </li>
      </div>
    </div>
    <div class="voteRecord">
      <header>投票纪录</header>
      <ul>
        <li v-for="(item,index) in voteData" :index="index" :key="index">
          <div class="recordLeft">
            <p>{{item.extend2}}</p>
            <p>{{item.createTime}}</p>
          </div>
          <div class="recordRight">+1</div>
        </li>
      </ul>
      <div class="checkmore" @click="checkmore">查看更多</div>
    </div>
    <section></section>
    <div class="navBar">
      <ul>
        <li @click="linkToHome">
          <p>首页</p>
        </li>
        <li @click="voting">投票</li>
        <li @click="linkToVoting(id)">送礼</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      voteData: [],
      id: "",
      hdPlayerGiftlist: "",
      player: "",
      playerImg: "",
      pageSize: 4,
      pageNum: 1
    };
  },
  components: {},
  methods: {
    linkToHome() {
      wx.switchTab({ url: "../home/main" });
    },
    linkToVoting(ids) {
      const url = "../voteingPage/main?id=";

      wx.navigateTo({ url: url +ids});
    },
    /*  获取数据开始 */
    getVoteData() {
      return this.$fly.post("/playerTicket", {
        playerId: this.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      });
    },
    getPlayerData() {
      return this.$fly.post("/player", { id: this.id, activityId: 1 });
    },
    getPlayerDetailData() {
      let that = this;
      this.$fly
        .all([this.getVoteData(), this.getPlayerData()])
        .then(
          this.$fly.spread(function(voteList, player) {
            console.log("选手信息", player);
            that.hdPlayerGiftlist = player.data.data.hdPlayerGiftlist;
            that.player = player.data.data.player;
            that.playerImg = player.data.data.playerImg;
            console.log("投票记录", voteList);
            that.voteData = voteList.data.rows;
            console.log(that.voteData);
          })
        )
        .catch(function(err) {
          console.log("获取数据失败", err);
        });
    },
    /*  获取数据结束 */
    checkmore() {
      let that = this;
      this.$fly
        .post("/playerTicket", {
          pageNum: that.pageNum++,
          pageSize: that.pageSize
        })
        .then(res => {
          that.voteData = that.voteData.concat(res.data.rows);
          console.log("增加后", that.voteData);
        });
    },
    voting() {
      this.$fly
        .post("/vote", {
          extend1: this.openid,
          extend2: this.player.name,
          extend3: this.player.activityId,
          playerId: this.player.id
        })
        .then(res => {
          console.log('投票成功',res);
          wx.showToast({
            title: "投票成功",
            icon: "success",
            duration: 2000
          });
        })
        .catch(err=>{
          console.log('投票失败', err);
          
        })
    }
  },
  created() {},
  onLoad: function(options) {
    this.id = options.id;
    console.log(this.id);
    this.getPlayerDetailData();
  }
};
</script>
<style>
page {
  background-color: #f8f9f9;
  margin-bottom: 50px;
}
</style>
<style scoped>
section {
  height: 50px;
}
.photo {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.photo img {
  height: 80px;
  width: 80px;
  border-radius: 50%;
}
.photo p {
  margin-top: 10px;
  font-size: 16px;
  color: #a6acaf;
}
.playerVoteInfo {
  margin: 20px 10px;
  padding: 10px;
  background-color: #f8c471;
  font-size: 18px;
  color: #f4f6f7;
  border-radius: 5px;
}
.playerVoteInfo ul {
  display: flex;
}
.playerVoteInfo ul li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.playerDesc,
.playerPhoto,
.listOfVotes,
.voteRecord {
  background-color: #fff;
  font-size: 17px;
  margin: 0 10px;
  color: #a6acaf;
}
.playerDesc header,
.playerPhoto header,
.listOfVotes header,
.voteRecord header {
  text-align: center;
  margin: 10px;
  padding: 10px;
  border-bottom: 1px solid #ecf0f1;
}
.playerDesc p {
  height: auto;
  padding: 10px;
}
.playerPhoto img {
  width: 100%;
}
.listOfVotes {
  margin-top: 20px;
  color: white;
}
.listOfVotes header {
  background-color: #f8c471;
  margin: 0;
}
.listContent {
  height: 200px;
  color: #a6acaf;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.listContent .sendGift {
  background-color: #58d68d;
  color: white;
  border-radius: 20px;
  width: 40%;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
}
.listContents {
  height: 300px;
  overflow-y: auto;
}
.listContents li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.listContents li aside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.listContents li aside p {
  color: #a6acaf;
}
.listContents li div {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
}
.listContents p {
  color: #58d68d;
}
.listContents img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.voteRecord .checkmore {
  background-color: #58d68d;
  width: 90%;
  color: white;
  margin: 10px auto;
  line-height: 40px;
  height: 40px;
  text-align: center;
  border-radius: 10px;
}
.voteRecord ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ecf0f1;
  padding: 20px;
}
.recordRight {
  color: #58d68d;
}
.voteRecord button {
  margin-top: 10px;
}
.navBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fafafa;
  height: 50px;
}

.navBar ul {
  display: flex;
}
.navBar ul li {
  height: 50px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5d6d7e;
}
.navBar ul li img {
  width: 20px;
  height: 20px;
}
</style>
